<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import {
  Button,
  DatePicker,
  message,
  Table,
  Tabs,
  Typography,
} from 'ant-design-vue';
import dayjs from 'dayjs';

// 页面标题
defineOptions({
  name: 'AssetReport',
});

// 响应式数据
const selectedDate = ref(dayjs('2025-01'));
const activeTab = ref('summary');

// 折旧汇总表列配置
const summaryColumns = [
  {
    title: '资产类别',
    dataIndex: 'category',
    key: 'category',
    width: 150,
    align: 'center' as const,
  },
  {
    title: '资产原值',
    dataIndex: 'originalValue',
    key: 'originalValue',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '期初累计折旧',
    dataIndex: 'initialDepreciation',
    key: 'initialDepreciation',
    width: 140,
    align: 'right' as const,
  },
  {
    title: '本期折旧',
    dataIndex: 'currentDepreciation',
    key: 'currentDepreciation',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '累计折旧',
    dataIndex: 'totalDepreciation',
    key: 'totalDepreciation',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '本月减值准备',
    dataIndex: 'currentImpairment',
    key: 'currentImpairment',
    width: 140,
    align: 'right' as const,
  },
  {
    title: '累计减值准备',
    dataIndex: 'totalImpairment',
    key: 'totalImpairment',
    width: 140,
    align: 'right' as const,
  },
  {
    title: '资产净值',
    dataIndex: 'netValue',
    key: 'netValue',
    width: 120,
    align: 'right' as const,
  },
];

// 折旧明细表列配置
const detailColumns = [
  {
    title: '资产编码',
    dataIndex: 'code',
    key: 'code',
    width: 120,
    align: 'center' as const,
  },
  {
    title: '资产名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
    align: 'left' as const,
  },
  {
    title: '资产类别',
    dataIndex: 'category',
    key: 'category',
    width: 120,
    align: 'center' as const,
  },
  {
    title: '使用部门',
    dataIndex: 'department',
    key: 'department',
    width: 120,
    align: 'center' as const,
  },
  {
    title: '折旧金额',
    dataIndex: 'depreciationAmount',
    key: 'depreciationAmount',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '累计折旧',
    dataIndex: 'totalDepreciation',
    key: 'totalDepreciation',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '资产净值',
    dataIndex: 'netValue',
    key: 'netValue',
    width: 120,
    align: 'right' as const,
  },
];

// 折旧汇总表数据
const summaryDataSource = ref([
  {
    key: '1',
    category: '电子设备',
    originalValue: '500,000.00',
    initialDepreciation: '150,000.00',
    currentDepreciation: '25,000.00',
    totalDepreciation: '175,000.00',
    currentImpairment: '0.00',
    totalImpairment: '0.00',
    netValue: '325,000.00',
  },
  {
    key: '2',
    category: '办公家具',
    originalValue: '200,000.00',
    initialDepreciation: '80,000.00',
    currentDepreciation: '8,000.00',
    totalDepreciation: '88,000.00',
    currentImpairment: '0.00',
    totalImpairment: '0.00',
    netValue: '112,000.00',
  },
  {
    key: '3',
    category: '机械设备',
    originalValue: '800,000.00',
    initialDepreciation: '200,000.00',
    currentDepreciation: '20,000.00',
    totalDepreciation: '220,000.00',
    currentImpairment: '0.00',
    totalImpairment: '0.00',
    netValue: '580,000.00',
  },
  {
    key: '4',
    category: '运输设备',
    originalValue: '300,000.00',
    initialDepreciation: '120,000.00',
    currentDepreciation: '15,000.00',
    totalDepreciation: '135,000.00',
    currentImpairment: '0.00',
    totalImpairment: '0.00',
    netValue: '165,000.00',
  },
]);

// 折旧明细表数据
const detailDataSource = ref([
  {
    key: '1',
    code: 'FA001',
    name: '办公电脑',
    category: '电子设备',
    department: '财务部',
    depreciationAmount: '5,000.00',
    totalDepreciation: '35,000.00',
    netValue: '65,000.00',
  },
  {
    key: '2',
    code: 'FA002',
    name: '办公桌椅',
    category: '办公家具',
    department: '行政部',
    depreciationAmount: '2,000.00',
    totalDepreciation: '18,000.00',
    netValue: '32,000.00',
  },
  {
    key: '3',
    code: 'FA003',
    name: '打印机',
    category: '电子设备',
    department: '财务部',
    depreciationAmount: '3,000.00',
    totalDepreciation: '21,000.00',
    netValue: '29,000.00',
  },
  {
    key: '4',
    code: 'FA004',
    name: '空调设备',
    category: '机械设备',
    department: '办公室',
    depreciationAmount: '8,000.00',
    totalDepreciation: '48,000.00',
    netValue: '152,000.00',
  },
  {
    key: '5',
    code: 'FA005',
    name: '服务器',
    category: '电子设备',
    department: 'IT部',
    depreciationAmount: '10,000.00',
    totalDepreciation: '60,000.00',
    netValue: '140,000.00',
  },
]);

// 合计数据
const summaryTotal = {
  category: '合计',
  originalValue: '1,800,000.00',
  initialDepreciation: '550,000.00',
  currentDepreciation: '68,000.00',
  totalDepreciation: '618,000.00',
  currentImpairment: '0.00',
  totalImpairment: '0.00',
  netValue: '1,182,000.00',
};

// Tab选项
const tabItems = [
  {
    key: 'summary',
    label: '折旧汇总表',
  },
  {
    key: 'detail',
    label: '折旧明细表',
  },
];

// 事件处理函数
const handleDateChange = (date: any) => {
  selectedDate.value = date;
  const dateStr = date ? date.format('YYYY-MM') : '';
  message.info(`切换会计期间至: ${dateStr}`);
};

const handlePrint = () => {
  const tabName = activeTab.value === 'summary' ? '折旧汇总表' : '折旧明细表';
  message.info(`打印${tabName}功能开发中...`);
};

const handleExport = () => {
  const tabName = activeTab.value === 'summary' ? '折旧汇总表' : '折旧明细表';
  message.info(`导出${tabName}功能开发中...`);
};

const handleTabChange = (key: string) => {
  activeTab.value = key;
  const tabName = key === 'summary' ? '折旧汇总表' : '折旧明细表';
  message.success(`切换到${tabName}`);
};
</script>

<template>
  <Page auto-content-height>
    <!-- 页面头部 -->
    <div class="mb-6">
      <!-- 公司名称和面包屑 -->
      <div class="mb-4 flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <h1 class="text-lg font-medium text-gray-900">
            北京神州源科技有限公司
          </h1>
          <div class="text-sm text-gray-500">
            <span>固定资产</span>
            <span class="mx-2">></span>
            <span class="text-blue-600">资产报表</span>
          </div>
        </div>
      </div>

      <!-- 模拟标签页 -->
      <div class="mb-4 flex space-x-1 border-b border-gray-200">
        <div
          class="rounded-t-lg border-l border-r border-t border-blue-200 bg-blue-50 px-4 py-2 text-sm text-blue-600"
        >
          资产报表
        </div>
        <div
          class="cursor-pointer px-4 py-2 text-sm text-gray-600 hover:bg-gray-50"
        >
          计提折旧
        </div>
        <div
          class="cursor-pointer px-4 py-2 text-sm text-gray-600 hover:bg-gray-50"
        >
          当前账簿
        </div>
      </div>
    </div>

    <!-- Tab 切换区 -->
    <div class="mb-6">
      <Tabs
        v-model:active-key="activeTab"
        type="card"
        @change="handleTabChange"
      >
        <template v-for="item in tabItems" :key="item.key">
          <Tabs.TabPane :tab="item.label" />
        </template>
      </Tabs>
    </div>

    <!-- 报表筛选与操作区 -->
    <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <!-- 会计期间 -->
          <div class="flex items-center space-x-2">
            <span class="text-sm font-medium text-gray-700">会计期间:</span>
            <DatePicker
              v-model:value="selectedDate"
              picker="month"
              format="YYYY-MM"
              placeholder="选择月份"
              class="w-32"
              @change="handleDateChange"
            />
          </div>
        </div>

        <div class="flex items-center space-x-3">
          <!-- 打印按钮 -->
          <Button
            size="middle"
            class="flex items-center space-x-1"
            @click="handlePrint"
          >
            <IconifyIcon icon="mdi:printer" />
            <span>打印</span>
          </Button>

          <!-- 导出按钮 -->
          <Button
            size="middle"
            class="flex items-center space-x-1"
            @click="handleExport"
          >
            <IconifyIcon icon="mdi:export" />
            <span>导出</span>
          </Button>
        </div>
      </div>
    </div>

    <!-- 报表内容区 -->
    <div class="rounded-lg border border-gray-200 bg-white shadow-sm">
      <!-- 折旧汇总表 -->
      <div v-if="activeTab === 'summary'">
        <!-- 报表标题 -->
        <div class="border-b border-gray-200 p-4">
          <Typography.Title :level="3" class="!mb-0 text-center text-green-600">
            固定资产折旧汇总表
          </Typography.Title>
          <div class="mt-2 text-center text-sm text-gray-500">
            会计期间: {{ selectedDate.format('YYYY年MM月') }}
          </div>
        </div>

        <!-- 汇总表格 -->
        <Table
          :columns="summaryColumns"
          :data-source="summaryDataSource"
          :pagination="false"
          :scroll="{ x: 1200, y: 400 }"
          size="middle"
          bordered
          class="w-full"
        >
          <!-- 自定义表头样式 -->
          <template #headerCell="{ column }">
            <div class="font-medium text-gray-900">
              {{ column.title }}
            </div>
          </template>

          <!-- 自定义单元格样式 -->
          <template #bodyCell="{ column, record }">
            <div
              class="text-gray-700"
              :class="[column.align === 'right' ? 'font-mono' : '']"
            >
              {{ record[column.dataIndex] }}
            </div>
          </template>
        </Table>

        <!-- 合计行 -->
        <div class="border-t border-gray-200 bg-gray-50">
          <div class="flex">
            <div
              class="w-[150px] flex-none border-r border-gray-200 px-4 py-3 text-center font-medium text-gray-900"
            >
              {{ summaryTotal.category }}
            </div>
            <div
              class="w-[120px] flex-none border-r border-gray-200 px-4 py-3 text-right font-mono text-gray-900"
            >
              {{ summaryTotal.originalValue }}
            </div>
            <div
              class="w-[140px] flex-none border-r border-gray-200 px-4 py-3 text-right font-mono text-gray-900"
            >
              {{ summaryTotal.initialDepreciation }}
            </div>
            <div
              class="w-[120px] flex-none border-r border-gray-200 px-4 py-3 text-right font-mono text-gray-900"
            >
              {{ summaryTotal.currentDepreciation }}
            </div>
            <div
              class="w-[120px] flex-none border-r border-gray-200 px-4 py-3 text-right font-mono text-gray-900"
            >
              {{ summaryTotal.totalDepreciation }}
            </div>
            <div
              class="w-[140px] flex-none border-r border-gray-200 px-4 py-3 text-right font-mono text-gray-900"
            >
              {{ summaryTotal.currentImpairment }}
            </div>
            <div
              class="w-[140px] flex-none border-r border-gray-200 px-4 py-3 text-right font-mono text-gray-900"
            >
              {{ summaryTotal.totalImpairment }}
            </div>
            <div
              class="w-[120px] flex-none px-4 py-3 text-right font-mono text-gray-900"
            >
              {{ summaryTotal.netValue }}
            </div>
          </div>
        </div>
      </div>

      <!-- 折旧明细表 -->
      <div v-else-if="activeTab === 'detail'">
        <!-- 报表标题 -->
        <div class="border-b border-gray-200 p-4">
          <Typography.Title :level="3" class="!mb-0 text-center text-green-600">
            固定资产折旧明细表
          </Typography.Title>
          <div class="mt-2 text-center text-sm text-gray-500">
            会计期间: {{ selectedDate.format('YYYY年MM月') }}
          </div>
        </div>

        <!-- 明细表格 -->
        <Table
          :columns="detailColumns"
          :data-source="detailDataSource"
          :pagination="{
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
          }"
          :scroll="{ x: 1000, y: 400 }"
          size="middle"
          bordered
          class="w-full"
        >
          <!-- 自定义表头样式 -->
          <template #headerCell="{ column }">
            <div class="font-medium text-gray-900">
              {{ column.title }}
            </div>
          </template>

          <!-- 自定义单元格样式 -->
          <template #bodyCell="{ column, record }">
            <div
              class="text-gray-700"
              :class="[column.align === 'right' ? 'font-mono' : '']"
            >
              {{ record[column.dataIndex] }}
            </div>
          </template>
        </Table>
      </div>
    </div>

    <!-- 页面底部信息 -->
    <div class="mt-6 text-center text-sm text-gray-500">
      <p v-if="activeTab === 'summary'">
        共 {{ summaryDataSource.length }} 个资产类别
      </p>
      <p v-else>共 {{ detailDataSource.length }} 条资产记录</p>
    </div>
  </Page>
</template>

<style scoped>
/* 自定义样式 */
.ant-table-thead > tr > th {
  background-color: #f8fafc;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  color: #374151;
}

.ant-table-tbody > tr > td {
  border-bottom: 1px solid #f3f4f6;
}

.ant-table-tbody > tr:hover > td {
  background-color: #f9fafb;
}

/* Tab 样式 */
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
  border-radius: 6px 6px 0 0;
  border-color: #d1d5db;
}

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

/* 日期选择器样式 */
.ant-picker {
  border-radius: 6px;
  border-color: #d1d5db;
}

.ant-picker:hover {
  border-color: #3b82f6;
}

.ant-picker-focused {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* 按钮样式 */
.ant-btn {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s;
}

.ant-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 报表标题样式 */
.ant-typography h3 {
  font-weight: 600;
}
</style>
